<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Navigation</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");

:root {
  --primaryColor: #fff;
  --navColor1: #21292c;
  --navColor2: #aa3e39;
  --navColor3: #aa6e39;
  --navColor4: #236267;
  --navColor5: #2c8437;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000;
  font-family: Nunito, sans-serif;
}

/* --- Navigation Menu ------------------------------ */

/* Overlay */
.overlay {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  transform: translateX(-100vw);
}

.overlay-slide-right {
  transition: all 0.4s ease-in-out;
  transform: translateX(0);
}

.overlay-slide-left {
  transition: all 0.8s ease-in-out;
  transform: translateX(-100vw);
}

/* Nav Menu Items */
nav,
nav ul {
  height: 100vh;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  list-style: none;
}

nav ul li {
  height: 20%;
  overflow: hidden;
}

nav li a {
  position: relative;
  top: 45%;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
}

nav li a:hover {
  transform: scale(1.2);
}

nav li a::before {
  content: "";
  width: 25vw;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 47.5%;
  left: 0;
  opacity: 0;
}

nav li a:hover::before {
  opacity: 1;
}

nav li:nth-of-type(1) {
  background-color: var(--navColor1);
}

nav li:nth-of-type(2) {
  background-color: var(--navColor2);
}

nav li:nth-of-type(3) {
  background-color: var(--navColor3);
}

nav li:nth-of-type(4) {
  background-color: var(--navColor4);
}

nav li:nth-of-type(5) {
  background-color: var(--navColor5);
}

/* Slide in animation with delay for each */
.slide-in-1 {
  animation: slide-in 0.4s linear 0.2s both;
}

.slide-in-2 {
  animation: slide-in 0.4s linear 0.4s both;
}

.slide-in-3 {
  animation: slide-in 0.4s linear 0.6s both;
}

.slide-in-4 {
  animation: slide-in 0.4s linear 0.8s both;
}

.slide-in-5 {
  animation: slide-in 0.4s linear 1s both;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Slide out animation with delay for each */
.slide-out-1 {
  animation: slide-out 0.3s linear 0.5s both;
}

.slide-out-2 {
  animation: slide-out 0.3s linear 0.4s both;
}

.slide-out-3 {
  animation: slide-out 0.3s linear 0.3s both;
}

.slide-out-4 {
  animation: slide-out 0.3s linear 0.2s both;
}

.slide-out-5 {
  animation: slide-out 0.3s linear 0.1s both;
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* --- Menu Bars ------------------------------------ */

.menu-bars {
  position: fixed;
  top: 1rem;
  right: 2rem;
  z-index: 10;
  display: inline;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 2px;
  background-color: #fff;
  margin: 8px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  transform: rotate(-45deg) translate(-7px, 8px);
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  transform: rotate(45deg) translate(-6px, -8px);
}

/* --- Sections ------------------------------------ */

section {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primaryColor);
}

section#home {
  background-image: url("https://images.unsplash.com/photo-1581453904507-626ddb717f14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80");
  background-size: cover;
  background-position: center center;
}

section#home a {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  left: 1.5rem;
  text-decoration: none;
  font-size: 0.8rem;
  padding-bottom: 5px;
  color: var(--primaryColor);
  border-bottom: 1px solid var(--primaryColor);
}

section#about {
  background-color: var(--navColor2);
}

section#skills {
  background-color: var(--navColor3);
}

section#projects {
  background-color: var(--navColor4);
}

section#contact {
  background-color: var(--navColor5);
}

/* Media Query: Large Smartphone (Vertical) */
@media (max-width: 600px) {
  section#home a {
    top: 1rem;
    left: 1rem;
  }

  .menu-bars {
    top: 0.5rem;
    right: 1rem;
  }
}

  </style>
</head>
<body>
  <!-- Menu Overlay -->
  <div class="overlay overlay-slide-left" id="overlay">
    <!-- Menu Items -->
    <nav>
      <ul>
        <li id="nav-1" class="slide-out-1"><a href="#">Home</a></li>
        <li id="nav-2" class="slide-out-2"><a href="#about">About</a></li>
        <li id="nav-3" class="slide-out-3"><a href="#skills">Skills</a></li>
        <li id="nav-4" class="slide-out-4"><a href="#projects">Projects</a></li>
        <li id="nav-5" class="slide-out-5"><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
  <!-- Menu Bars -->
  <div class="menu-bars" id="menu-bars">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <!-- Sections -->
  <section id="home"><a href="#" target="_blank">Anu Design</a></section>
  <section id="about"><h1>Learn More About Me</h1></section>
  <section id="skills"><h1>These Are My Strengths</h1></section>
  <section id="projects"><h1>These Are My Results</h1></section>
  <section id="contact"><h1>Available Anytime</h1></section>
  <!-- Script -->
  <script>
    const menuBars = document.getElementById('menu-bars');
const overlay = document.getElementById('overlay');
const nav1 = document.getElementById('nav-1');
const nav2 = document.getElementById('nav-2');
const nav3 = document.getElementById('nav-3');
const nav4 = document.getElementById('nav-4');
const nav5 = document.getElementById('nav-5');
const navItems = [nav1, nav2, nav3, nav4, nav5];

// Control Navigation Animation
function navAnimation(direction1, direction2) {
  navItems.forEach((nav, i) => {
    nav.classList.replace(`slide-${direction1}-${i + 1}`, `slide-${direction2}-${i + 1}`);
  });
}

function toggleNav() {
  // Toggle: Menu Bars Open/Closed
  menuBars.classList.toggle('change');
  // Toggle: Menu Active
  overlay.classList.toggle('overlay-active');
  if (overlay.classList.contains('overlay-active')) {
    // Animate In - Overlay
    overlay.classList.replace('overlay-slide-left', 'overlay-slide-right');
    // Animate In - Nav Items
    navAnimation('out', 'in');
  } else {
    // Animate Out - Overlay
    overlay.classList.replace('overlay-slide-right', 'overlay-slide-left');
    // Animate Out - Nav Items
    navAnimation('in', 'out');
  }
}

// Event Listeners
menuBars.addEventListener('click', toggleNav);
navItems.forEach((nav) => {
  nav.addEventListener('click', toggleNav);
});

  </script>
</body>
</html>
